<template>
	<div>
		<el-form label-width="100">
			<!-- SPU 名称 begin -->
			<el-form-item label="SPU名称">
				<el-input
					placeholder="请你输入SPU名称"
					v-model="spuParams.spuName"
				></el-input>
			</el-form-item>
			<!-- SPU 名称 end -->
			<el-form-item label="SPU品牌">
				<el-select
					placeholder="请你选择品牌"
					v-model="spuParams.tmId"
				>
					<el-option
						:value="item.id"
						:label="item.tmName"
						v-for="(item, index) in allTmArr"
						:key="item.id"
					></el-option>
				</el-select>
			</el-form-item>
			<!-- SPU品牌 begin -->
			<!-- SPU品牌 end -->

			<!-- SPU描述 begin -->
			<el-form-item lable="SPU描述">
				<el-input
					type="textarea"
					placeholder="请你输入SPU描述"
					v-model="spuParams.description"
				></el-input>
			</el-form-item>
			<!-- SPU描述 end -->

			<!-- SPU图片 begin -->
			<el-form-item label="SPU图片">
				<!-- 
                    v-model:file-list="fileList" 照片墙展示图片的数据
                    on-preview  预览图片 
                    on-remove  移出图片
                    因为v-model:file-list="imageArr"  所以 handleRemove  不需要收集数据
                -->
				<el-upload
					v-model:file-list="imageArr"
					action="/app-dev/admin/product/fileUpload"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:before-upload="handlerUpload"
				>
					<el-icon><HelpFilled /></el-icon>
				</el-upload>

				<el-dialog
					v-model="dialogVisible"
					align-center
				>
					<img
						w-full
						:src="dialogImageUrl"
						alt="Preview Image"
						style="width: 80%"
					/>
				</el-dialog>
			</el-form-item>
			<!-- SPU图片 end -->

			<!-- 销售属性 begin -->
			<el-form-item label="销售属性">
				<!-- 添加销售属性下拉  添加属性按钮  begin -->
				<!-- 添加销售属性下拉 begin -->
				<el-select
					:placeholder="saleAttrTitle"
					v-model="saleAttrNameAndId"
				>
					<el-option
						:label="item.name"
						v-for="item in unSaleAttr"
						:key="item.id"
						:value="`${item.id}:${item.name}`"
					></el-option>
				</el-select>
				<!-- 添加销售属性下拉 end -->

				<!-- 添加属性按钮 begin -->
				<el-button
					type="primary"
					:icon="Plus"
					style="margin-left: 10px"
					@click="addSaleAttr"
					:disabled="saleAttrNameAndId ? false : true"
					>添加销售属性</el-button
				>
				<!-- 添加属性按钮 end -->
				<!-- 添加销售属性下拉  添加属性按钮  end -->

				<!-- 已有的属性table begin -->
				<el-table
					border
					style="margin: 10px 0px"
					:data="saleArr"
				>
					<!-- 表格序号 begin -->
					<el-table-column
						label="序号"
						type="index"
						align="center"
						width="100"
					></el-table-column>
					<!-- 表格序号 end -->
					<!-- 表格属性名 begin -->
					<el-table-column
						label="属性名"
						width="120"
						prop="saleAttrName"
					></el-table-column>
					<!-- 表格属性名 end -->
					<!-- 表格属性值 begin -->
					<el-table-column label="属性值">
						<template #="{ row, $index }">
							<!-- 属性值展示  和切换input编辑模式 begin -->
							<el-tag
								style="margin: 0px 5px"
								v-for="tag in row.spuSaleAttrValueList"
								:key="tag.id"
								class="mx-1"
								closable
								:type="tag.id % 2 == 0 ? 'success' : 'warning'"
								@close="handleClose(row)"
							>
								{{ tag.saleAttrValueName }}
							</el-tag>
							<el-input
								placeholder="请你输入属性值"
								style="display: inline"
								size="small"
								v-if="row.flag"
								v-model="row.saleAttrValueName"
								@blur="toLook(row)"
								:ref="(el) => (inputArr[$index] = el)"
							></el-input>
							<!-- @keyup.enter="toLook(row)" -->
							<!-- 属性值展示 和切换input编辑模式 end -->

							<!-- 添加属性值按钮 begin -->
							<el-button
								:icon="Plus"
								type="primary"
								size="small"
								@click="toEdit(row, $index)"
								style="margin-left: 10px"
								v-else
							></el-button>
							<!-- 添加属性值按钮 end -->
						</template>
					</el-table-column>
					<!-- 表格属性值 end -->
					<!-- 表格操作 begin -->
					<el-table-column
						label="操作"
						width="100"
					>
						<template #="{ row, $index }">
							<el-button
								type="danger"
								size="small"
								:icon="Delete"
								@click="saleArr.splice($index, 1)"
							></el-button>
						</template>
					</el-table-column>
					<!-- 表格操作 end -->
				</el-table>
				<!-- 已有的属性table end -->
				<!-- 保存  取消  按钮  begin -->
				<el-button
					type="primary"
					@click="save()"
					:disabled="saleArr.length ? false : true"
					>保存</el-button
				>
				<el-button @click="cancel">取消</el-button>
				<!-- 保存  取消  按钮  end -->
			</el-form-item>

			<!-- 销售属性 end -->
		</el-form>
	</div>
</template>

<script setup lang="ts">
	//引入请求的
	/*****************图片**********************/
	import cloneDeep from 'lodash/cloneDeep';
	import { ref, computed, nextTick } from 'vue';
	import { Plus, HelpFilled, Delete } from '@element-plus/icons-vue';
	import { ElMessage } from 'element-plus';
	import type { UploadProps } from 'element-plus';
	import { values } from 'lodash';
	//预览图片的地址
	const dialogImageUrl = ref('');
	const dialogVisible = ref(false);

	//添加spu 初始化
	const initAddSpudata = async (c3Id: number | string) => {
		// console.log('发两个请求');
		//添加之前  清空数据
		imageArr.value = [];
		saleArr.value = [];
		spuParams.value = {
			spuName: '', //SPU名字
			tmId: '', //品牌ID
			description: '', //SPU描述
			spuImageList: [],
			spuSaleAttrList: [],
			category3Id: 0, //三级分类的的ID
		};

		//获取全部品牌的数据
		let resTrademark = await reqallTrademark();
		//获取全部属性
		let resAllSaleAttr = await reqAllSaleAttr();
		// console.log(resTrademark, resAllSaleAttr);
		//存储allSaleArr allTmArr
		allTmArr.value = resTrademark;
		allSaleArr.value = resAllSaleAttr;
		//收集三级分类的ID
		spuParams.value.category3Id = c3Id;
	};

	// const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	// 	console.log(uploadFile, uploadFiles);
	// };
	//上传土拍你成功之前的钩子  约束文件的类型和大小
	const handlerUpload = (file: any) => {
		if (
			file.type == 'image/jpeg' ||
			file.type == 'image/png' ||
			file.type == 'image/gif'
		) {
			if (file.size / 1024 / 1024 < 2) {
				return true;
			} else {
				ElMessage({
					type: 'error',
					message: '图片不能大于2M',
				});
				return false;
			}
		} else {
			ElMessage({
				type: 'error',
				message: '请上传文件类型为：png|jpeg|gif',
			});
			return false;
		}
	};

	//预览的钩子
	const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
		dialogImageUrl.value = uploadFile.url!;
		dialogVisible.value = true;
	};
	/*****************图片**********************/
	//引入修改时需要的四个请求
	import {
		reqallTrademark,
		reqImageList,
		reqSaleAttrList,
		reqAllSaleAttr,
		reqAddOrUpdateSpu,
	} from '../../../api/product/spu/index';

	//获取$emit方法、
	let $emit = defineEmits(['changeScene']);

	//全部品牌数据
	let allTmArr = ref([]);
	//已有照片墙的数据
	let imageArr = ref([]);
	//已有的销售属性
	let saleArr = ref([]);
	//所有的销售属性
	let allSaleArr = ref([]);
	//存储已有SPU对象：将来发请求修改需要携带的参数
	let spuParams = ref({
		spuName: '', //SPU名字
		tmId: '', //品牌ID
		description: '', //SPU描述
		spuImageList: [],
		spuSaleAttrList: [],
		category3Id: 0, //三级分类的的ID
	});

	//储存input表单元素VC
	let inputArr = ref([]);

	//收集新销售增属性的id和销售属性的名字  将来带给服务器
	let saleAttrNameAndId = ref('');

	//计算出未选择的属性   所有属性减去已有的属性  过滤  unSaleAttr
	let unSaleAttr = computed(() => {
		//全部的销售属性：过滤还未选择的销售属性 返回一个新数组
		let result = allSaleArr.value.filter((item: any) => {
			// console.log(item);
			//过滤的条件  ：需要返回布尔值，真：过滤出来的结果，假：不要
			return saleArr.value.every((hasSaleAttr: any) => {
				return item.name != hasSaleAttr.saleAttrName;
			});
		});
		// console.log(result);
		return result;
	});
	//计算出未选择的属性   所有属性减去已有的属性  过滤 end

	//销售属性选择时  placeholder提示的文字
	let saleAttrTitle = computed(() => {
		return unSaleAttr.value.length == 0
			? '暂无数据可选择'
			: `还有${unSaleAttr.value.length}个属性未选择`;
	});
	//销售属性选择时  placeholder提示的文字 end

	//添加新的销售属性
	let addSaleAttr = () => {
		//先获取新增属性的id和name  然后切出来
		let [baseSaleAttrId, saleAttrName] = saleAttrNameAndId.value.split(':');
		console.log(baseSaleAttrId, saleAttrName);
		// 创建一个新的销售属性对象  要和已有销售属性saleArr的放到一起
		let newSaleObj = {
			baseSaleAttrId,
			saleAttrName,
			spuSaleAttrValueList: [], //新增销售属性的属性值
		};
		//已有的销售属性saleArr  要新增一个销售属性
		saleArr.value.push(newSaleObj);
		// console.log(newSaleObj);
		//清空收集的新增数据
		saleAttrNameAndId.value = '';
	};
	//添加新的销售属性 end

	//点击添加属性值
	let toEdit = (row, $index) => {
		row.flag = true;
		//给每一个销售属性对象添加一个属性：收集表单元素的内容
		row.saleAttrValueName = '';
		//获取表单元素聚焦
		nextTick(() => {
			inputArr.value[$index].focus();
		});
	};

	//表单元素失去焦点=>查看模式
	const toLook = (row) => {
		//鼠标离开input后  将表单收集的数据追加到属性值数组中
		// console.log(row);
		// saleAttrValueName属性的id
		//baseSaleAttrId 销售属性值归属于哪一个销售属性
		const { saleAttrValueName, baseSaleAttrId } = row;
		//准备一个属性值对象
		let newSaleAttrValueObj = {
			saleAttrValueName,
			baseSaleAttrId,
		};
		//判断输入的值出现的情况
		if (saleAttrValueName.trim() == '') {
			//除去空格外如果为空
			ElMessage({
				type: 'warning',
				message: '属性值不能为空',
			});
			return;
		}
		//判断输入的值是否重复
		let repeat = row.spuSaleAttrValueList.find((item) => {
			return item.saleAttrValueName === saleAttrValueName;
		});
		if (repeat) {
			ElMessage({
				type: 'warning',
				message: '属性值不能重复',
			});
			return;
		}
		//收集到的属性值对象追加到spuSaleAttrValueList里面
		row.spuSaleAttrValueList.push(newSaleAttrValueObj);
		//清空input内容
		// row.saleAttrValueName = '';
		//blur完后显示添加按钮
		row.flag = false;
	};
	//点击添加属性值 end

	// 点击tag 叉子
	const handleClose = (row: any, index: any) => {
		console.log(1);
		row.spuSaleAttrValueList.splice(index, 1);
	};

	//保存按钮回调   需要父子组件通信
	const save = async () => {
		//整理保存需要的参数  => 发请求  成功干啥  失败干啥
		//照片墙数据
		let imgList = imageArr.value.map((item) => {
			return {
				imgName: item.name,
				imgUrl: (item.response && item.response.data) || item.url,
			};
		});
		// console.log(imgList);
		//收集的照片墙
		spuParams.value.spuImageList = imgList;
		//销售属性
		spuParams.value.spuSaleAttrList = saleArr.value;
		// console.log(spuParams.value.spuSaleAttrList);
		//更新已有的spu  添加spu
		try {
			//修改已有的spu
			await reqAddOrUpdateSpu(spuParams.value);
			ElMessage({
				type: 'success',
				message: spuParams.value.id ? '修改成功' : '添加成功',
			});
			//告诉父组件切换场景为0
			$emit('changeScene', {
				scenes: 0,
				flag: spuParams.value.id ? '修改' : '添加',
			});
		} catch (error) {
			ElMessage({
				type: 'warning',
				message: spuParams.value.id ? '修改失败' : '添加失败',
			});
		}
	};
	//取消按钮回调   需要父子组件通信
	const cancel = () => {
		//告诉父组件切换场景为0
		$emit('changeScene', { scenes: 0 });
	};

	//子组件spuform的方法  用户发请求
	const initHasSpuData = async (hasSpu: any) => {
		// 清空数据
		imageArr.value = [];
		saleArr.value = [];

		spuParams.value = cloneDeep(hasSpu);
		// console.log(hasSpu);
		// console.log(hasSpu.id);
		//获取全部品牌的数据
		let resTrademark = await reqallTrademark();
		// console.log('获取全部品牌的数据:', resTrademark);
		//获取照片墙
		let resImageList = await reqImageList(hasSpu.id);
		// console.log('照片墙:', resImageList);
		//获取某个已有spu销售属性
		let resSaleAttrList = await reqSaleAttrList(hasSpu.id);
		// console.log('已有的销售属性:', resSaleAttrList);
		//获取全部属性
		let resAllSaleAttr = await reqAllSaleAttr();
		// console.log('已有的销售属性:', resAllSaleAttr);
		//全部品牌
		allTmArr.value = resTrademark;
		//照片墙的数据   由于照片墙展示的数据：图片对象{name:xxx,url:xxx}
		imageArr.value = resImageList.map((item) => {
			return {
				name: item.imgName,
				url: item.imgUrl,
			};
		});
		//已有的销售属性
		saleArr.value = resSaleAttrList;
		//所有的销售属性
		allSaleArr.value = resAllSaleAttr;
	};
	//暴漏此方法
	defineExpose({ initHasSpuData, initAddSpudata });
</script>

<style scoped></style>
